<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<ul class="list">
    <li>li 1</li>
    <li>li 2</li>
    <li>li 3</li>
    <li>li 4</li>
</ul>

<script>
// 三个点 ...

// 1.扩展运算符/展开运算符 ...
// ... 可以展开底层部署了迭代器接口的数据（字符串、数组、伪数组对象、Map对象、Set对象）
// 字符串、数组、伪数组对象等数据可以展开为 逗号隔开的参数序列
// function fn(a,b,c,d){}// a,b,c,d -> 逗号隔开的参数序列

let str = 'abcd';
let arr = ['a1','a2','a3','a4'];
let lis = document.querySelectorAll('.list li');
console.log( ...str );// 'a','b','c','d'
console.log( ...arr );// 'a1','a2','a3','a4'
console.log( ...lis );// <li>1</li>,<li>2</li>,<li>3</li>,<li>4</li>

function sum(a,b,c){
    console.log( a+b+c );
}
sum(1,2,3);
sum(...[2,3,4]);// sum(2,3,4)


/* let obj = {
    name: '老王',
    age: 38,
    sex: '男',
    friends: ['如花','翠花','村花']
}
// console.log( ...obj );// 报错，对象底层没有部署迭代器接口

let obj2 = {...obj,money:12345678};

obj.friends.push('小美');

console.log( obj2 );// {name: '老王', age: 38, sex: '男', friends: Array(4), money: 12345678} */


// 2.rest运算符/剩余参数运算符 ...
// 应用场景：解构赋值和形参接收值
let arr1 = [1,2,3,4,5];
// let [a,...b,c] = arr1; 报错，rest元素必须在最后
let [a,b,...c] = arr1;
console.log( a );// 1
console.log( b );// 2
console.log( c );// [3,4,5]

let obj1 = {
    name: '老王',
    age: 38,
    sex: '男',
    friends: ['如花','翠花','村花']
}
let {name,age,...sex} = obj1;
console.log( name );// '老王'
console.log( age );// 38
console.log( sex );// {sex:'男',friends:[...]}

function test(){
    // 求传入的所有参数的和
    let sum = 0;
    for (var i = 0; arguments[i]; i++) {
        sum += arguments[i];
    }
    console.log( sum );
    return sum;
}
test(1,2,3);
test(1,2,3,4,5,6);

function test2(...arr){// ...arr表示接收所有实参并保存在arr数组中
    // 求传入的所有参数的和
    let sum = 0;
    for (var i = 0; arr[i]; i++) {
        sum += arr[i];
    }
    console.log( sum );
    return sum;
}
test2(1,2,3);
test2(1,2,3,4,5,6);


function test3(...arr){// ...rest运算符
    console.log( ...arr );// ...扩展运算符
}
let arr3 = [1,2,3,4];
test3(...arr3);// ...扩展运算符

console.log( [11,22] );
console.log( {a:123} );
console.log( new String('abc') );

</script>
</body>
</html>